<template>
  <div class="zhu" style="background: rgb(247, 247, 247);">
    <van-nav-bar title="购物车">
      <template #left>
        <van-icon name="arrow-left" color="gray" />
      </template>
      <template #right>
        <span>编辑</span>
      </template>
    </van-nav-bar>
    <van-nav-bar class="m-b-1">
      <template #left>
        <span>先锋侠需要您的精确坐标</span>
      </template>
      <template #right>
        <van-icon name="arrow" color="gray" size="20px" />
      </template>
    </van-nav-bar>
    <van-nav-bar class="m-b-2">
      <template #left>
        <span>收货时间</span>
      </template>
      <template #right>
        <span style="color: #379ede;">今天30分钟可送达(可预订)</span>
        <van-icon name="arrow" color="gray" size="20px" />
      </template>
    </van-nav-bar>
    <van-nav-bar>
      <template #left>
        <van-checkbox v-model="checked" checked-color="#ee0a24">
          自营商店
        </van-checkbox>
      </template>
    </van-nav-bar>
    <van-panel>
      <van-checkbox
        class="m-l-4"
        v-model="checked"
        checked-color="#ee0a24"
      ></van-checkbox>
      <van-image
        class="m-b-3"
        width="100"
        height="100"
        :src="require('./img/cart/01.png')"
      />
      <div class="width m-l-1">
        <span class="font">
          1SNP 燕窝补水面膜 10片/盒含燕窝精华 双倍补水保湿
        </span>
        <div class="i-text2 m-t-2 m-b-1">
          ￥
          <i class="priceJs" style="font-style: normal;">10.00</i>
        </div>
        <van-stepper
          v-model="value"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>
    </van-panel>
    <van-panel>
      <van-checkbox
        class="m-l-4"
        v-model="checked"
        checked-color="#ee0a24"
      ></van-checkbox>
      <van-image
        class="m-b-3"
        width="100"
        height="100"
        :src="require('./img/cart/02.png')"
      />
      <div class="width m-l-1">
        <span class="font">
          2SNP 燕窝补水面膜 10片/盒含燕窝精华 双倍补水保湿
        </span>
        <div class="i-text2 m-t-2 m-b-1">
          ￥
          <i class="priceJs" style="font-style: normal;">15.00</i>
        </div>
        <van-stepper
          v-model="value"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>
    </van-panel>
    <van-nav-bar class="m-b-7">
      <template #left>
        <span>本店总计：￥0.00</span>
      </template>
    </van-nav-bar>
    <van-submit-bar
      button-color="rgb(255,157,15)"
      :price="3050"
      button-text="去结算"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      value: 1,
    }
  },
}
</script>

<style>
.goods-card {
  margin: 0;
  background: white;
}
.zhu .van-submit-bar {
  bottom: 50px;
  position: fixed !important;
}
.delete-button {
  height: 100%;
}
.zhu .van-card {
  background: white;
}
.zhu .van-submit-bar {
  position: relative;
}
.van-panel__content {
  display: flex;
}
.van-cell-group .van-cell:after {
  border-bottom: 0px;
}
.width {
  width: 64%;
}
.i-text2 {
  width: 100%;
  color: #ff9201;
  float: left;
  font-size: 18px;
}
.van-nav-bar__left,
.van-nav-bar__right {
  flex-direction: row !important;
}
</style>
